<template>

  <div class="comment">
    <!-- 评论列表 -->
    <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      @load="loadComments"
      finished-text="暂无评论"
    >
      <!-- 文章评论 -->
      <div
        class="item van-hairline--bottom van-hairline--top"
        v-for="item in comments"
        :key="item.com_id.toString()"
      >
        <van-image
          round
          width="1rem"
          height="1rem"
          fit="fill"
          :src="item.aut_photo"
        />
        <div class="info">
          <p>
            <span class="name">{{item.aut_name}}</span>
            <span style="float:right">
              <span class="van-icon van-icon-good-job-o zan"></span>
              <span class="count">{{item.like_count}}</span>
            </span>
          </p>
          <p>{{item.content}}</p>
          <p>
            <span class="time">{{item.pubdate|relTime}}</span>&nbsp;
            <van-tag
              plain
              @click="showReplyview(item.com_id.toString())"
            >{{item.reply_count}} 回复</van-tag>
          </p>
        </div>
      </div>
    </van-list>
    <!-- 底部输入框 -->
    <div class="reply-container van-hairline--top">
      <van-field
        v-model="value"
        :placeholder="showReply?'回复该评论...':'写评论...'"
      >
        <van-loading
          v-if="submiting"
          slot="button"
          type="spinner"
          size="16px"
        >
        </van-loading>
        <span
          class="submit"
          v-else
          slot="button"
          @click="commentOrReply()"
        >提交</span>
      </van-field>
    </div>
    <!-- 回复 -->
    <van-action-sheet
      v-model="showReply"
      class="reply_dailog"
      title="回复评论"
    >
      <van-list
        v-model="reply.loading"
        :immediate-check="false"
        :finished="reply.finished"
        finished-text="没有更多了"
      >
        <div
          class="item van-hairline--bottom van-hairline--top"
          v-for="item in reply.replyList"
          :key="item.com_id.toString()"
        >
          <van-image
            round
            width="1rem"
            height="1rem"
            fit="fill"
            :src="item.aut_photo"
          />
          <div class="info">
            <p><span class="name">{{item.aut_name}}</span></p>
            <p>{{item.content}}</p>
            <p><span class="time">{{item.pubdate|relTime}}</span></p>
          </div>
        </div>
      </van-list>
    </van-action-sheet>
  </div>

</template>

<script>
import { getComments, commentOrReply } from '@/api/news'
export default {
  data () {
    return {
      // 评论列表
      comments: [],
      // 评论列表加载中状态
      loading: false,
      // 评论列表完全加载完毕状态
      finished: false,
      // 输入的内容
      value: '',
      // 提交 评论或者回复 中
      submiting: false,
      //
      offset: null,
      // 显示回复对话框
      showReply: false,
      // 回复相关数据
      reply: {
        loading: false,
        finished: false,
        replyList: []// 存回复的列表
      },
      // 评论/回复id
      commentID: null
    }
  },
  activated () {
    //   * 手动加载当前文章评论列表
    //   * 1. 清空之前评论列表数据
    //   * 2. 手动触发van - list组件加载第一屏数据
    // 因为列表被缓存了，所以
    // 每次打开页面都要从头开始 所以全部恢复原始数据，最后调用接口重新渲染
    // console.log(this.$route.params.id)
    this.comments = []
    this.finished = false
    this.loading = false
    this.offset = null
    this.loadComments()
  },
  methods: {
    async loadComments () { // 获取文章的评论列表
      // 异步更新数据
      const { data } = await getComments({ type: 'a', source: this.$route.params.id, offset: this.offset })

      this.comments.push(...data.results)

      // console.log(this.comments)
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (data.last_id > data.end_id) {
        this.offset = data.last_id
      } else {
        this.finished = true
      }
    },
    showReplyview (id) { // 点击打开回复页面
      // 因为列表被缓存了，所以
      // 每次打开页面都要从头开始 所以全部恢复原始数据，最后调用接口重新渲染

      this.showReply = true
      // 清空回复的列表
      this.reply.replyList = []
      // 开启加载效果
      this.reply.loading = true
      // 重置 没有更多数据
      this.reply.finished = false
      // 重置 偏移量
      this.reply.offset = null
      // 存id
      this.commentID = id
      // 调接口
      this.getReplyList()
    },
    async getReplyList () { // 获取回复的列表
      const { data } = await getComments({ type: 'c', source: this.commentID, offset: this.reply.offset })
      // console.log(data)
      this.reply.replyList.push(...data.results)
      // console.log(this.reply.replyList)
      // 加载状态结束
      this.reply.loading = false
      // 数据全部加载完成
      // 如果 后台返回的total跟this.reply.replyList.length的长度一致 表明：数据全部加载完成
      // 否则 就将后台返回的last_id存到this.reply.offset里 用于请求下一页的数据
      if (data.total_count !== this.reply.replyList.length) {
        this.reply.offset = data.last_id
      } else {
        this.reply.finished = true
      }
    },
    async commentOrReply () { // 文章评论或者回复
      // 如果输入框内值为空就直接阻止
      // eslint-disable-next-line no-useless-return
      if (!this.value) return
      this.submiting = true

      try {
        // 如果this.showReply为false 即弹出层隐藏  就证明要给文章评论
        if (!this.showReply) {
          const { data } = await commentOrReply(this.$route.params.id, this.value)
          this.comments.unshift(data.new_obj)
          this.$toast.success('评论文章成功 ')
        } else { // 为true即弹出层出现 就是要回复评论
          // 后台更新
          const { data } = await commentOrReply(this.commentID, this.value, this.$route.params.id)
          // console.log(data)
          // 本地更新一下
          this.reply.replyList.unshift(data.new_obj)
          this.$toast.success('回复评论成功 ')
        }
      } catch (error) {
        console.log(error)

        this.$toast.fail('操作失败 ')
      }
      this.value = ''
      this.submiting = false
    }

  }
}
</script>

<style lang="less" scoped>
.comment {
  margin-top: 10px;
  /deep/ .item {
    display: flex;
    padding: 10px 0;
    width: 100%;
    overflow: hidden;
    text-align: left;
    .info {
      flex: 1;
      padding-left: 10px;
      .name {
        color: #069;
      }
      .zan {
        vertical-align: middle;
        padding-right: 2px;
      }
      .count {
        vertical-align: middle;
        font-size: 10px;
        color: #666;
      }
      .time {
        color: #666;
      }
      p {
        padding: 5px 0;
        margin: 0;
      }
    }
  }
  /deep/ .van-button:active::before {
    background: transparent;
  }
}
.reply-container {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 44px;
  width: 100%;
  background: #f5f5f5;
  z-index: 9999;
  .submit {
    font-size: 12px;
    color: #3296fa;
  }
}
.van-popup--bottom {
  &.van-popup--round {
    border-radius: 0;
  }
}
.reply_dailog {
  height: 100%;
  max-height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  .van-action-sheet__header {
    background: #3296fa;
    color: #fff;
    .van-icon-close {
      color: #fff;
    }
  }
  .van-action-sheet__content {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px 44px;
  }
}
</style>
